<template>
  <div class="post">
    <div class="wrapper--post">
      <div class="post-header">
        <div class="post-header--content">
          <div class="spacer"></div>
          <div class="navigator">
            <a class="go-back" href="javascript:;" @click="back">
              <i class="sight-icon-arrow-left"></i> <span>{{$t('back')}}</span>
            </a>
          </div>
          <div class="article-header">
            <div class="stack">
              <h3 class="title">{{article.title}}</h3>
              <p class="date">{{$t('updatedAt')}}{{formatDate(article.updatedAt)}}</p>
              <div class="author">
                <div class="avatar">
                  <img :src="$config.STATIC_BASE + '/author/'+ article.author.avatar" alt="" />
                </div>
                <div class="info">
                  <p class="name">{{ article.author.name }}</p>
                  <p>
                    <a href="https://github.com/Coke-Code" target="_blank"
                      >@Coke-Code</a
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="post-body">
        <div class="post-menu--trigger" @click="handleTriggerClick">
          <i :class="showMobileMenu ? 'sight-icon-x' : 'sight-icon-menu'"></i>
        </div>
        <div v-show="showMobileMenu" class="modal"></div>
        <div class="post-menu" :class="{ 'post-menu--mobile': showMobileMenu }">
          <h4>{{$t('menu')}}</h4>
          <div class="menu-body">
            <div class="spacer"></div>
            <p v-for="link of article.toc" :key="link.id" :data-depth="link.depth"><a :href="`#${link.id}`">{{ link.text }}</a></p>
          </div>
        </div>
        <nuxt-content  :class="{'nuxt-content':true,'wide-content':!article.ad}" :document="article" />
        <div v-if="article.ad" class="post-aside">
          <div class="aside-body">
            <div v-for="a in article.ad" v-show="visibleAds.includes(a.name)" :key="a.name" class="card">
              <div class="ad-close" @click="closeAd(a.name)"><i class="sight-icon-x"></i></div>
              <a class="ad-body" :href="article.ad.link || 'javascript:;'" target="_blank">
                <img class="ad-banner" :src="a.image" :alt="a.name">
              </a>
              <p class="ad-title">{{a.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  async asyncData({ app,redirect, $content, params }) {
    const [article = {}] = await $content('articles').where(params).fetch()
    if(!article.title){
      redirect('/404')
    }
    return {
      article
    }
  },
  data() {
    return {
      showMobileMenu: false,
      visibleAds:[],
    }
  },
  head(){
    return {
      title: this.article.title,
      meta:[
        { name: 'keywords', content: this.article.keywords },
        { hid: 'description', name: 'description', content: this.article.description }
      ]
    }
  },
  mounted() {
    document.addEventListener('click', this.handleBodyClick)
    window.addEventListener('hashchange', ()=>{this.showMobileMenu = false})
    if(this.article.ad){
      this.visibleAds =  this.article.ad.map(v=>v.name)
    }
  },
  methods: {
    handleTriggerClick() {
      this.showMobileMenu = !this.showMobileMenu
    },
    handleBodyClick(e) {
      if (e.target.className === 'modal') {
        this.handleTriggerClick()
      }
    },
    formatDate(date) {
      return dayjs(date).format('YYYY MM/DD HH:mm:ss')
    },
    back(){
      if(window.history.length > 2){
        this.$router.go(-1)
      }else{
        this.$router.push(this.localePath('/'))
      }
    },
    closeAd(name){
      const index = this.visibleAds.findIndex(v => v === name)
      if(index!==-1){
        this.visibleAds.splice(index,1)
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.menu-body{
  counter-reset: counter1 0 counter2 01 counter3 0 counter4 0;
  p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    &[data-depth='2']{
      counter-reset: counter2;
      &::before{
        display: inline-block;
        counter-increment: counter1;
        content: counter(counter1) ". "
      }
    }
    &[data-depth='3']{
      padding-left: 10px;
      counter-reset: counter3;
      &::before{
        display: inline-block;
        counter-increment: counter2;
        content: counter(counter1) "." counter(counter2) ". "
      }
    }
    &[data-depth='4']{
      padding-left: 20px;
      counter-reset: counter4;
      &::before{
        display: inline-block;
        counter-increment: counter3;
        content: counter(counter1) "." counter(counter2) "." counter(counter3) ". "
      }
    }
    &[data-depth='5']{
      padding-left: 30px;
      &::before{
        display: inline-block;
        counter-increment: counter4;
        content: counter(counter1) "." counter(counter2) "." counter(counter3) "." counter(counter4) ". "
      }
    }
  }
  &::-webkit-scrollbar-track {
    width: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #eee;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
}
.modal {
  position: fixed;
  top: var(--header-height);
  left: 0;
  background: var(--foreground);
  opacity: 0.5;
  height: calc(100vh - var(--header-height));
  width: 100vw;
}
.post-header {
  border-bottom: 1px solid var(--accents-2);
}
.post-header--content{
  max-width: var(--page-width);
  margin: 0 auto;
}
.post-body {
  display: flex;
  margin: var(--space-large);
}

.nuxt-content{
  margin: 0 auto;
  max-width: calc(100vw - 600px);
  margin-bottom: 3em;
  padding: 0 var(--space-2x);
  width: 100%;
}
.wide-content{
  padding: 0 var(--space-8x);
}
.post-menu {
  position: sticky;
  top: calc(var(--header-height) + var(--space-small));
  height: calc(100vh - var(--header-height));
  .menu-body {
    max-width: 280px;
    text-align: center;
    height: calc(100% - 60px);
    overflow-y: auto;
    a {
      line-height: 1.5;
      margin-left: var(--space-2x-negative);
      padding: var(--space);
      width: 90%;
      text-align: left;
      padding-left: 10px;
      &::before {
        content: '#';
        opacity: 0;
      }
      &:hover {
        font-size: 1rem;
        &::before {
          opacity: 1;
        }
      }
    }
  }
}
.post-aside {
  width: calc((100vw - 768px) / 2);  
  max-width: 200px;
  min-width: 150px;
  .aside-body{
    flex-direction: column;
    display: flex;
    position: sticky;
    top: calc(var(--header-height) + var(--space-small));
  }
  .ad-close{
    position: absolute;
    bottom: 3px;
    left: 5px;
    width: 20px;
    height: 20px;
    color: var(--background);
    opacity: 0.5;
    z-index: 2;
  }
  .ad-body{
    font-size: 0;
  }
  .ad-banner{
    height: 300px;
    object-fit: cover;
  }
  .ad-title{
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2em;
    line-height: 2em;
  }
  .card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    padding: 0;
    border-radius: 0;
    & + .card {
      margin-top: var(--gap);
    }
  }
}
.stack {
  text-align: center;
  padding: var(--space-8x);
  .spacer {
    margin-top: var(--space-4x);
  }
}
.author {
  display: flex;
  align-items: center;
  align-self: center;
  .avatar {
    display: flex;
    width: 30px;
    border-radius: 50%;
    margin: var(--space-2x);
    img {
      width: 100%;
      object-fit: cover;
    }
  }
  .info {
    text-align: left;
    .name {
      font-weight: bold;
    }
  }
}

.article-header {
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: var(--space-8x);
  .date {
    margin: var(--space-4x) 0;
  }
}

.article-content {
  max-width: 768px;
  margin: auto;
}
.article-content p {
  margin: var(--space-2x) 0;
}
.post-menu--mobile,
.post-menu--trigger {
  display: none;
  z-index: 9;
}
@media screen and (max-width: 1440px) {
  .nuxt-content{
    margin: 0 auto 3em;
  }
  .post-body{
    margin: var(--space-2x);
  }
  .post-menu .menu-body{
    width:calc((100vw - 768px) / 2);
    min-width: 150px;
  }
}
@media screen and (max-width: 1200px) {
  .nuxt-content{
    max-width: 600px;
    width: 100%;
  }
}
@media screen and (max-width: 900px) {
  .post-menu {
    padding-top: var(--space-4x);
    display: none;
    height: calc(100vh - 240px);
    .menu-body {
      width: 100%;
      max-width: 90%;
      overflow: auto;
      a {
        text-align: center;
      }
    }
  }
  .post-menu--mobile {
    background: var(--accents-1);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    padding: var(--header-height) 30px;
    .card {
      width: 100%;
    }
  }
  .post-menu--trigger {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--accents-2);
    background: var(--background);
    opacity: 0.85;
  }
  .post-body {
    flex-direction: column;
    padding: var(--space) 0;
    margin: var(--space-mini)
  }
  .post-aside {
    margin-top: 3rem;
    width: 100%;
    max-width: 100%;
    order: 2;
    padding: 0;
    align-self: center;
    .aside-body{
      position: static;
    }
    .card{
      margin: 0 auto;
    }
  }
  .stack{
    padding: var(--space);
  }
  .nuxt-content{
    margin: 0 auto 3em;
    padding: 0;
  }
  .wide-content{
    padding: 0;
  }
}
</style>
